<template>
  <div>
    <PageTools>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="策略搜索">
          <el-input
            v-model="formInline.policyName"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="Search"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </PageTools>
    <el-card class="main">
      <el-button
        style="margin-bottom:10px"
        type="primary"
        size="small"
        icon="el-icon-circle-plus-outline"
        @click="addForm"
      >新建</el-button>
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="list"
        style="width: 100%"
        :header-cell-style="{
          fontWeight: 'normal',
          background: '#f3f6fb',
        }"
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column label="策略名称" prop="policyName" name="policyName" />
        <el-table-column label="策略方案" prop="discount" name="discount" />
        <el-table-column label="创建时间" prop="createTime">
          <template #default="{row}">
            {{ new Date(row.createTime).toLocaleString().replace(/\//g,'.') }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button
              type="text"
              size="small"
              @click="lookPolicy(row)"
            >查看详情</el-button>
            <el-button
              type="text"
              size="small"
              @click="editPolicy(row)"
            >修改</el-button>
            <el-button
              type="text"
              size="small"
              class="del"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row
        v-if="page.pageIndex!==1"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-col :span="19">
          <p class="paginationHeader">
            {{
              `共${totalCount}条记录 第${page.pageIndex}/${totalPage}页`
            }}
          </p>
        </el-col>
        <el-col :span="5">
          <el-pagination
            layout="prev, pager, next"
            prev-text="上一页"
            next-text="下一页"
            @current-change="changePage"
          />
        </el-col>
      </el-row>
    </el-card>
    <AddPolicy :dialog-policy="dialogpolicy" :item="policyObj" @closeFn="closeFn" @PolicyFn="PolicyFn" />
    <DetailPolicy :details-visible="detailsVisible" :item="detailsObj" @closeDialog="closeDialog" />
  </div>
</template>

<script>
import DetailPolicy from './component/detail-policy.vue'
import AddPolicy from './component/add-policy.vue'
import { getPolicySearch } from '@/api/policy'
export default {
  components: {
    AddPolicy,
    DetailPolicy
  },
  data() {
    return {
      formInline: {
        policyName: ''
      },
      loading: false,
      list: [],
      page: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: '',
      totalPage: '',
      dialogpolicy: false, // 新增弹出层
      policyObj: {}, // 存放表格每一行数据
      detailsVisible: false, // 查看详情弹出层
      detailsObj: {}
    }
  },
  created() {
    this.getPolicySearch()
  },
  methods: {
    // 1.查询
    Search() {
      this.getPolicySearch(this.formInline)
    },
    // 2.新建
    addForm() {
      this.dialogpolicy = true
    },
    // 2.1关闭新增策略弹出层
    closeFn() {
      this.policyObj = {}
      this.dialogpolicy = false
    },
    // 2.2.策略弹出层点击缺点提交数据--需要触发父组件关闭弹出层和从新拉去数据
    PolicyFn() {
      this.policyObj = {}
      this.getPolicySearch()
      this.dialogpolicy = false
    },
    // 3.请求策略管理数据
    async getPolicySearch(policyName) {
      const { data } = await getPolicySearch({ ...this.page, ...policyName })
      this.list = data.currentPageRecords
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
    },
    // 3.1.分页
    changePage(val) {
      this.page.pageIndex = val
      this.getPolicySearch()
    },
    // 修改详情
    editPolicy(row) {
      this.policyObj = row
      this.dialogpolicy = true
    },
    // 4.查看详情弹出层显示
    lookPolicy(row) {
      this.detailsObj = row
      this.detailsVisible = true
    },
    // 4.1.查看详情弹出层的隐藏
    closeDialog() {
      this.detailsVisible = false
    }
  }
}
</script>

<style lang="scss">
.demo-form-inline {
  margin-top: 20px;
  color: #606266;
  font-size: 14px;
  font-weight: normal;
  .el-button--primary {
    background-color: #5f84ff;
    height: 36px;
    padding: 0;
    text-align: center;
    min-width: 80px;
  }
}
.main {
  margin: 20px;
  // padding: 17px;
  .el-button--primary {
    background: linear-gradient(135deg, #ff9743, #ff5e20);
    border: unset;
    height: 36px;
    width: 80px !important;
  }
  .el-button--success {
    background-color: #fbf4f0 !important;
    border: none;
    color: #655b56 !important;
    height: 36px;
    width: 80px !important;
  }
  .paginationHeader {
    font-size: 16px;
    color: #dbdfe5;
    padding-left:8px ;
  }
   .el-pagination{
  padding-left: 22px;
 }
  .el-pagination button:disabled{
    width: 70px;
    height: 32px;
    background-color: #EDF0F9;
    margin-right: 16px;
  }
  .el-pagination .btn-next, .el-pagination .btn-prev{
      width: 70px;
    height: 32px;
    background-color: #D5DDF8;
  }
}
.el-table__row{
  height: 44px;
}
.el-table {
  position: unset;
}
.el-table thead {
  color: #666666 !important;
}
.el-table td,
.el-table th.is-leaf {
  border-bottom: 0 !important;
}
.el-table--fit {
  margin-top: 10px;
}
.el-table td {
  padding: 0px;
}
.el-button--text {
  color: #5f84ff;
  height: 36px;
}
.del{
  color:red;
}
</style>
